<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>体检报告</title>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .one{
            border-bottom:3px solid #3ab6b4!important;
            color: #6eabb0;
        }
        .tab1{
            width: 100%;
            position: fixed;
            top:0;left:0;
            z-index: 1;
            text-align: center;
            background: #f5f5f5;
        }
        .tab1 td{
            line-height: 40px;
        }

        .m img{
            float:left;

        }
        .m{

            overflow: hidden;
            margin-top: 50px;

        }
    </style>



</head>

<body>

   <div class="hd">
       <table class="tab1">
          <tr>
              <td class="td0" onclick="bian(0)">1</td>
              <td class="td1" onclick="bian(1)">2</td>
              <td class="td2" onclick="bian(2)">3</td>
          </tr>
       </table>
   </div>
    <div class="m">
        <div class="main">
            <div class="find">
                <div class="pinch-zoom">
                    <img src="Public/img/01.jpg" width="100%" class="img0" data="Public/img/01.jpg"/>

                </div>
            </div>
            <div class="find">
                <div class="pinch-zoom d">
                    <img src="" width="100%" class="img1" data="Public/img/01.jpg"/>
                </div>
            </div>

            <div class="find">
                <div class="pinch-zoom d">
                    <img src="" width="100%" class="img2" data="Public/img/a2.jpg"/>
                </div>
            </div>

        </div>
    </div>
            
      
<script type="text/javascript" src="Public/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Public/js/pinchzoom.min.js"></script>
<script type="text/javascript">

//每个节点的宽度
    var ww=$(window).width();
    var hh=$(window).height();
    var imgW=ww;
    $(".find").css({"width":ww,"float":"left"});
    $(".m").css({"width":ww});
    $("img").css({"width":imgW});
    $(".main").css({"width":3*imgW});
    $(".tab1 .td0").addClass("one");

//.m节点初始高度
    var k=0;
    (function(){

        var imgH=$(".img"+k).height();
        $(".m").height(imgH);
        var aa=$(".img"+k).attr("data");
//        $(".img0").attr("src",aa);
//        $(".m").height(hh-80);


    })();

//通过传参改变样式
    function bian(i){
        var aa=$(".img"+i).attr("data");
        $(".img"+i).attr("src",aa);

        var imgH=$(".img"+i).height();
        $(".m").height(imgH);

        $(".tab1 td").removeClass("one");
        wd=i*ww;
        $(".main").css({"transform":"translate3d(-"+wd+"px,0,0)"});
        $(".td"+i).addClass("one");

    }
//调用函数
    $('div.pinch-zoom').each(function() {
        new RTP.PinchZoom($(this), {});
    });

</script>
</body>

</html>